<template>  
   <div ref="canvasContainer" class="box"></div>  
   <!-- 创建一个用于展示 Three.js 画布的容器 -->  
   <div class="thumbnails">  
      <!-- 使用 v-for 指令遍历 images 数组，生成六个图片 -->  
      <img v-for="(img, index) in images" :key="index" :src="img"   
       @click="moveToFace(index)" class="thumbnail" />  
      <!-- 点击图片时调用 moveToFace 函数，传入图片索引 -->  
   </div>  
</template>  

<script>
import { onMounted, ref } from 'vue'; // 导入 Vue 的响应式功能  
import * as THREE from 'three'; // 导入 Three.js 库  
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; // 导入相机控制器  

// 定义六个面相应的图片路径  
const back = '/imgs/back.png';
const front = '/imgs/front.png';
const top = '/imgs/top.png';
const bottom = '/imgs/bottom.png';
const left = '/imgs/left.png';
const right = '/imgs/right.png';

export default {
   setup() { // Vue 3 的组合式 API  
      const canvasContainer = ref(null); // 创建一个对画布容器的引用  
      const camera = ref(null); // 创建一个对相机的引用  
      const orbit = ref(null); // 创建一个对相机控制器的引用  
      const images = [back, front, top, bottom, left, right]; // 定义一个包含图片路径的数组  

      // 加载纹理的函数，返回材质  
      const loadTexture = (url) => {
         const loader = new THREE.TextureLoader(); // 创建纹理加载器  
         const texture = loader.load(url); // 加载指定的纹理  
         const material = new THREE.MeshBasicMaterial({
            map: texture, // 设置纹理  
            side: THREE.DoubleSide, // 材质的两面都可见  
         });
         return material; // 返回创建的材质  
      };

      // 移动相机到指定的立方体面的位置  
      const moveToFace = (faceIndex) => {
         // 定义立方体每个面相应的相机位置  
         const positions = [
            new THREE.Vector3(0, 0, 1),   // front 面  
            new THREE.Vector3(0, 0, -1),  // back 面  
            new THREE.Vector3(0, 1, 0),   // top 面  
            new THREE.Vector3(0, -1, 0),  // bottom 面  
            new THREE.Vector3(-1, 0, 0),  // left 面  
            new THREE.Vector3(1, 0, 0)    // right 面  
         ];
         orbit.value.enableZoom = true; // 启用缩放功能  

         // 设置相机位置为指定面的位置  
         camera.value.position.copy(positions[faceIndex]);
         camera.value.lookAt(0, 0, 0); // 相机指向立方体的中心  
         orbit.value.update(); // 更新相机控制器  
      };

      onMounted(() => {
         // 初始化相机  
         camera.value = new THREE.PerspectiveCamera(
            70, // 视场角  
            window.innerWidth / window.innerHeight, // 纵横比  
            0.01, // 近裁剪面  
            10 // 远裁剪面  
         );
         camera.value.position.z = 1; // 设置相机的初始位置  

         const scene = new THREE.Scene(); // 创建一个场景  

         // 加载每个面的材质  
         const materials = [
            loadTexture(back),
            loadTexture(front),
            loadTexture(top),
            loadTexture(bottom),
            loadTexture(left),
            loadTexture(right),
         ];

         // 创建一个立方体几何体  
         const geometry = new THREE.BoxGeometry(4, 4, 4);
         const mesh = new THREE.Mesh(geometry, materials); // 根据几何体和材质创建网格  
         scene.add(mesh); // 将网格添加到场景中  

         const renderer = new THREE.WebGLRenderer({ antialias: true }); // 创建渲染器  
         renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的尺寸  
         canvasContainer.value.appendChild(renderer.domElement); // 将渲染器的 DOM 元素添加到画布容器  

         // 动画渲染循环  
         const animate = () => {
            renderer.render(scene, camera.value); // 渲染场景  
            requestAnimationFrame(animate); // 请求下一帧渲染  
         };

         animate(); // 开始动画渲染  

         orbit.value = new OrbitControls(camera.value, renderer.domElement); // 初始化 OrbitControls  
         orbit.value.enableZoom = false; // 禁用缩放功能  
      });

      return {
         canvasContainer, // 返回画布容器引用  
         images, // 返回图片数组  
         moveToFace, // 返回移动相机的函数  
      };
   },
};  
</script>
<style>
.box {
   width: 100%;
   height: 100vh;
}

.thumbnails {
   position: absolute;
   bottom: 10px;
   /* 从底部 10px*/
   left: 10px;
   /* 从左侧 10px */
   display: flex;
   /* 设置为 flexbox */
   flex-direction: row;
   /* 横向排列 */
   gap: 10px;
   /* 为图片之间增加一些间距 */
}

.thumbnail {
   width: 50px;
   /* 缩略图的宽度 */
   height: auto;
   /* 高度自动调整保持比例 */
   cursor: pointer;
   /* 鼠标悬停时显示为可点击 */
   border: 2px solid transparent;
   /* 默认边框透明 */
}

.thumbnail:hover {
   border-color: #007bff;
   /* 悬停时的边框颜色 */
}
</style>